<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>游戏列表</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/gamelist.css">
  <link rel="stylesheet" href="./assets/iconfont/sugar/iconfont.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="left">
      <img src="./assets/images/logo.png" alt="logo">
    </div>
    <div class="right">
      <ul>
        <li>
          <a href="./index.html" target="_blank">
            <p>首页</p>
            <p>home</p>
          </a>
        </li>
        <li>
          <a href="./gamelist.html" target="_blank">
            <p>游戏</p>
            <p>game</p>
          </a>
        </li>
        <li>
          <p>案例</p>
          <p>Case</p>
        </li>
        <li>
          <p>关于我们</p>
          <p>About us</p>
        </li>
      </ul>
    </div>
    <div class="weibo">
      <i class="iconfont icon-weibo"></i>
    </div>
  </header>
  <!-- 内容 -->
  <section>
    <!-- 大图 -->
    <div class="big">
      <img src="./assets/images/list-pic.png" alt="pic">
    </div>
    <!-- 导航栏 -->
    <nav>
      <div class="first">
        <p>狂转游戏</p>
        <p>Turn mad game</p>
      </div>
      <div class="next">
        <p>抽奖游戏</p>
        <p>Lottery game</p>
      </div>
      <div class="mushroom">
        <img src="./assets/images/mushroom.png" alt="mushroom">
      </div>
    </nav>
    <!-- 按钮 -->
    <div class="button">
      <button>ALL</button>
      <button>最新游戏</button>
      <button>最热游戏</button>
      <button>购买最多</button>
    </div>
    <!-- 列表内容 -->
    <div class="content">
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>剑圣传奇</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list01.png" alt="list01">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>PLAGUE LNC</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list02.png" alt="list02">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>地狱边境</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list03.png" alt="list03">
      </div>
    </div>
    <div class="content">
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>功夫西游</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list04.png" alt="list04">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>宝石迷阵</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list05.png" alt="list05">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>植物大战僵尸</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list06.png" alt="list06">
      </div>
    </div>
    <div class="content">
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>狂斩三国</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list07.png" alt="list07">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>世界迷雾</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list08.png" alt="list08">
      </div>
      <div class="content1">
        <div class="top">
          <div class="left">
            <p>消灭星星游戏</p>
            <p>2014-07-09</p>
            <p>使用次数:20</p>
          </div>
          <div class="right">
            <a href="./gamepage.html" target="_blank"><button>购买</button></a>
            <i class="iconfont icon-wujiaoxingkong"></i>
          </div>
        </div>
        <img src="./assets/images/list09.png" alt="list09">
      </div>
    </div>
    <!-- 翻页 -->
    <div class="page">
      <i class="iconfont icon-fanyezuo"></i>
      <p>1 2 <span class="three">3</span> 4 5 6 ······ 12</p>
      <i class="iconfont icon-fanyeyou"></i>
    </div>
    <!-- 左右两边图片 -->
    <div class="icon">
      <img src="./assets/images/list-left.png" alt="left">
      <img src="./assets/images/list-right.png" alt="right">
    </div>
  </section>
  <!-- 尾部 -->
  <footer>
    <img src="./assets/images/bottom01.png" alt="bottom01">
    <p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
    <img src="./assets/images/bottom02.png" alt="bottom02">
  </footer>
</body>

</html>